<template>
  <!-- 此文件为内容管理这个菜单分类的组件，正常情况下菜单分类是没有组件的，这个是特殊处理，为了在菜单中显示栏目。且在layout的封装中，针对/content开头的路由，不使用key -->
  <div class="content-main">
    <ContentSidebar v-if="isShowSidebar" />
    <router-view />
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 路由元数据中isShowSidebar为false，且不是内容发布页面，则不显示侧边栏
const isShowSidebar = computed(() => !router.currentRoute.value.meta.isShowSidebar && !['/content/manage/setting', '/content/manage/preview'].includes(router.currentRoute.value.path))
onMounted(() => {
  const layoutMain = document.querySelector('.layout-main')
  if (layoutMain) {
    layoutMain.style.padding = '0'
  }
})

onBeforeUnmount(() => {
  const layoutMain = document.querySelector('.layout-main')
  if (layoutMain) {
    layoutMain.style.padding = '10px'
  }
})
</script>

<style scoped lang="scss">
.content-main {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
</style>